<template>
	<view class="preview">
		<swiper circular @change="handleSwipe" :current="currentIndex">
			<swiper-item v-for="(item,index) in picList" :key="item._id" >
				<image v-if="index>=currentIndex-1&&index<=currentIndex+1" @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="mask" v-show="maskState">
			<navigator open-type="navigateBack">
				<view class="go-back" ><uni-icons class="uni-icons" type="left" size="40rpx"></uni-icons></view>
			</navigator>
			<view class="count">{{currentIndex+1}}/{{picList.length}}</view>
			<view class="time">
				<uni-dateformat :date="Date.now()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="Date.now()" format="yyyy年MM月dd日"></uni-dateformat>
			</view>
		</view>
		<view class="footer" v-show="maskState">
			<view class="box" @click="openInfo">
				<uni-icons type="info" size="60rpx"></uni-icons>
				<text>信息</text>
			</view>
			<view class="box" @click="openRate">
				<uni-icons type="star" size="60rpx"></uni-icons>
				<text>{{picList[currentIndex].userScore||5}}分</text>
			</view>
			<view class="box">
				<uni-icons type="download" size="60rpx"></uni-icons>
				<text>下载</text>
			</view>
		</view>
		<uni-popup ref="infoPopupEl">
			<view class="info-popup">
				<view class="popup-head">
					<view class="title">壁纸信息</view>
					<uni-icons class="icons" type="closeempty" @click="closeInfo"></uni-icons>
				</view>
				<scroll-view scroll-y="true" >
					<view class="content">
						<view class="row">
							<view class="label">壁纸ID：</view>
							<text selectable class="value">{{picList[currentIndex]._id}}</text>
						</view>
						<view class="row">
							<view class="label">发布者：</view>
							<text selectable class="value">{{picList[currentIndex].nickname}}</text>
						</view>
						<view class="row">
							<view class="label">评分：</view>
							<view selectable class="value rate">
								<uni-rate :value="picList[currentIndex].score" readonly="true" size="16"/>
								<text class="score">{{picList[currentIndex].score}}</text>
							</view>
						</view>
						<view class="row">
							<view class="label">摘要：</view>
							<text selectable class="value">
								{{picList[currentIndex].description}}
							</text>
						</view>
						<view class="row">
							<view class="label">标签：</view>
							<text selectable class="value">
								<view class="theme-label" v-for="item in picList[currentIndex].tabs">{{item}}</view>
							</text>
						</view>
						<view class="claim">声明:本图片来用户投稿,非商业使用,用于免费学习交流,如侵犯了您的权益,您可以拷贝壁纸ID举报至平台,邮箱513894357@qq.com,管理将删除侵权壁纸,维护您的权益。</view>
						<view class="empty"></view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="ratePopupEl">
			<view class="rate-popup">
				<view class="popup-head">
					<view class="icons"></view>
					<view class="title">壁纸信息</view>
					<uni-icons class="icons" type="closeempty" @click="closeRate"></uni-icons>
				</view>
				<template class="score-detail">
					<uni-rate v-model="userScore"></uni-rate>
					<text class="text">{{userScore}}分</text>
				</template>
				<button @click="confirmScore">确认评分</button>
			</view>
			
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app"
import {apiSetScore} from "@/apis.js"
	var maskState=ref(true);
	const infoPopupEl=ref(null);
	const ratePopupEl=ref(null);
	var currentIndex=ref(0);
	var picList=ref([]);
	var userScore=ref(0);
	function maskChange(){
		maskState.value=!maskState.value;
	}
	function openInfo(){
		infoPopupEl.value.open('bottom');
	}
	function closeInfo(){
		infoPopupEl.value.close();
	}
	function openRate(){
		ratePopupEl.value.open("center");
	}
	function closeRate(){
		ratePopupEl.value.close();
	}
	async function confirmScore(){
		await apiSetScore({
			"classid":picList.value[currentIndex.value].classid,
			"wallId":picList.value[currentIndex.value]._id,
			"userScore":userScore.value
		})
		picList.value[currentIndex.value].userScore=userScore.value;
		userScore.value=0;
		closeRate();
		// console.log(picList.value[currentIndex.value]);
	}
	function handleSwipe(event){
		currentIndex.value = event.detail.current;
	}
	var list = uni.getStorageSync("StorageWallpaperList")||[];
	picList.value = list.map(item=>{
		return{
			...item,
			picurl:item.smallPicurl.replace("_small.webp",".jpg")
		}
	})
	onLoad(e=>{
		currentIndex.value = picList.value.findIndex(item=>item._id==e.id);
	})
</script>

<style lang="scss" scoped>
	.preview{
		width: 100%;
		height: 100vh;
		swiper{
			position: relative;
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.mask{
			position: absolute;
			top: 80rpx;
			left: 0;
			width: 100%;
			height: 400rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			// align-content: center;
			.go-back{
				box-sizing: border-box;
				border: 1px solid #ffffff;
				border-radius: 50%;
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 30rpx;
				top: 0;
				:deep(){
					.uni-icons{
						color: #fff !important;
					}
				}
			}
			.count{
				width: fit-content;
				padding: 8rpx 20rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #56565699;
				border-radius: 40rpx;
				text-align: center;
				font-size: 25rpx;
				color: white;
				// backdrop-filter: blur(5rpx);
			}
			.time{
				font-size: 120rpx;
				color: #fff;
				text-shadow: 3rpx 5rpx 3rpx#7f5636;
			}
			.date{
				font-size: 30rpx;
				color: #fff;
				text-shadow: 1rpx 3rpx 2rpx #6f6a64;
			}
		}
		.footer{
			position: absolute;
			bottom: 160rpx;
			background-color: #ffffffdd;
			width: 480rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin: 0 125rpx;
			padding: 0 10rpx;
			display: flex;
			// backdrop-filter: blur(20rpx);
			.box{
				width: 160rpx;
				font-size: 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
			}
		}
		.info-popup{
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			// width: 500rpx;
			.popup-head{
				position: relative;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.title{
					margin-top: 40rpx;
					font-size: 30rpx;
					color: #8f8f8f;
				}
				.icons{
					position: absolute;
					top: calc(30rpx + 15rpx );
					right: 40rpx;
					padding: 5rpx;
					color: #8e8e8e !important;
				}
			}
			scroll-view{
				.content{
					margin: 0 30rpx 40rpx 30rpx;
					max-height: 60vh;
					.row{
						line-height: 1.7em;
						padding: 16rpx;
						display: flex;
						.label{
							width: 140rpx;
							text-align: right;
							color: #6d6d6d;
						}
						.value{
							flex: 1;
							width: 0;
							.theme-label{
								display: inline-block;
								font-size: .8em;
								width: fit-content;
								padding: 0 25rpx;
								margin: 0rpx 10rpx 15rpx 10rpx;
								border: 1px solid #68c5a8;
								border-radius: calc(1.7em);
								color:#68c5a8 ;
							}
						}
						.value.rate{
							display: flex;
							flex-direction: row;
							align-items: center;
							.score{
								padding-left: 10rpx;
							}
						}
						
					}
					.claim{
						padding: 25rpx 20rpx;
						border-radius: 5rpx;
						background-color: #f6f6f6;
						color: #555;
					}
					.empty{
						width: 100%;
						height: 20rpx;
					}
				}
			}
			
			
		}
		.rate-popup{
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.popup-head{
				height: 100rpx;
				padding-top: 10rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.title{
					// margin-top: 40rpx;
					font-size: 30rpx;
					color: #8f8f8f;
				}
				.icons{
					position: absolute;
					top: 40rpx;
					right: 35rpx;
					padding: 5rpx;
					color: #8e8e8e !important;
				}
			}
			.score-detail{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: fit-content;
				padding: 0 70rpx;
				.text{
					margin-left: 10rpx;
					color: #fccc39;
				}
			}
			button{
				font-size: 25rpx;
				width: 170rpx;
				height: 60rpx;
				display: flex;
				align-items: center;justify-content: center;
				margin: 40rpx 0;
				background-color: transparent;
				border: .5px solid #000;
				border-radius: 15rpx;
			}
		}
	}
</style>
